<template>
	<div>
		dashbord{{ num }}
		{{ list }}
		<button v-permission="['admin', 'user']" @click="handleClick">这是一个按钮</button>
		<p>{{ htmlStr }}</p>
		<cropper>
			<template v-slot="slotProps">
				<button @click="onCropperHandle(slotProps.cropperProps)">
					上传并裁剪图片
				</button>
			</template>
		</cropper>
		<Test></Test>
		<table-demo></table-demo>

		<!-- <countTo
            :startVal="startVal"
            :endVal="endVal"
            :duration="3000"
            :decimals="2"
        ></countTo>
        <div class="video-box">
            <normal-video></normal-video>
        </div> -->

		<!-- <Editor :defaultValue="htmlStr" @change="onEditChange"></Editor> -->
	</div>
</template>

<script>
// import NormalVideo from "@/components/NormalVideo";
// import CountTo from "vue-count-to";
import Cropper from '@/components/Cropper';
import Test from './Test';
import TableDemo from './TableDemo';
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapMutations } = createNamespacedHelpers('dashbord');
export default {
	components: {
		// NormalVideo,
		// CountTo,
		Cropper,
		Test,
		TableDemo,
	},
	data() {
		return {
			htmlStr: 'AAA',
			num: 1,
			startVal: 0,
			endVal: 2017,
		};
	},
	computed: {
		...mapState({
			list: state => state.userList,
		}),
	},
	mounted() {
		setTimeout(() => {
			this.htmlStr = `
            <p>
    奥术大师是的
</p>
<p>
    快递费摸
</p>
<p>
    你是
</p>
<p>
    f发当
</p>
            `;
		}, 1000);
	},
	methods: {
		...mapMutations(['SET_USER_LIST']),
		onCropperHandle(cropperProps) {
			cropperProps.fileRef.click();
		},
		handleClick() {
			this.num++;
			this.htmlStr = `
                <span>haha${Math.random()}</span>
            `;
		},
		onEditChange(val) {
			console.log('change', val);
		},
	},
};
</script>

<style lang="scss" scoped>
.video-box {
	width: 400px;
	height: 400px;
}
</style>
